<template>
	<view class="page-container">
		<!-- 主内容容器 - 包含个人信息和功能菜单 -->
		<view class="main-content-container">
			<!-- 个人信息卡片 -->
			<view class="profile-card">
				<view class="profile-header">
					<image :src="userInfo.headImage || defaultAvatar" mode="aspectFill" class="avatar"
						@click="lookHeadImage" />
					<button class="edit-btn" @click="editUserInfo" v-if="userInfo._id">
						<van-icon name="edit" />
					</button>
				</view>

				<div class="profile-details">
					<h2 class="fullname">{{ userInfo.nickname || '游客' }}</h2>
					<p class="user-role" v-if="userInfo._id">{{ userInfo.ramk || '临时访问一下' }}</p>
				</div>

				<div class="login-section" v-if="!userInfo._id">
					<!-- 美化后的立即登录按钮 -->
					<button class="login-btn" @click="goToLogin">
						<van-icon name="user" class="login-icon" />
						<span class="login-text">立即登录</span>
					</button>
				</div>
			</view>

			<!-- 功能菜单区 -->
			<view class="menu-container">
				<view class="menu-section">
					<view class="menu-item" v-for="(item, index) in functionItems" :key="index"
						@click="handleNavigation(item.pathUrl)">
						<div class="menu-icon" :style="{ backgroundColor: item.color || '#e8f4fd' }">
							<van-icon :name="item.iconUrl || 'apps'" :color="item.iconColor || '#3b82f6'" />
						</div>
						<span class="menu-text">{{ item.menuName }}</span>
						<van-icon name="arrow-right" class="menu-arrow" />
					</view>
				</view>

				<view class="bottom-area" v-if="userInfo._id">
					<button class="logout-btn" @click="logOut">
						<van-icon name="logout" />
						<span>退出登录</span>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				defaultAvatar: 'https://picsum.photos/200/200?random=1',
				functionItems: []
			};
		},
		
		async onShow() {
			await this.getUserInfo()
			this.getInit()
		},
		
		methods: {
			async getInit() {
				let result = await this.$axios('menu', {
					userId: this.userInfo._id,
					location: 'wd'
				}, true)
				if (result.code == 200 &&　Array.isArray(result.data)) {
					this.functionItems =  []
					result.data.forEach(item => {
						if (!Array.isArray(item.children)) item.children = []
						this.functionItems.push(...item.children)
					})
					this.functionItems.push({
						menuName: this.userInfo._id ? '更多功能开发中...' : '点击立即登录 , 登录后解锁更多功能 , 快去登录吧~~',
						pathUrl: '',
						icon: 'loading',
						color: '#f3f4f6',
						iconColor: '#9ca3af'
					})
					console.log(this.functionItems , 'functionItems');
				}
			},
			
			async getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo')
				if(userInfo._id){
					// 验证这个用户是否还存在
					let result = await this.$axios('overallSituation', {
						_id: userInfo._id,
						databaseName:"userList",
						state:'look'
					}, true)
					if (result.code != 200 || !Array.isArray(result.data) || result.data.length == 0) {
						uni.removeStorageSync('userInfo')
						this.userInfo = {}
					}else {
						this.userInfo = uni.getStorageSync('userInfo')
					}
				}else {
					this.userInfo = {}
				}
				
			},


			logOut() {
				uni.showModal({
					title: "确定要退出登录吗？",
					content: "",
					confirmText: "确定",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync("userInfo");
							this.$router('/pages/login/index')
						}
					}
				});
			},

			editUserInfo() {
				this.$router(`/pages/user/userInfo?id=${this.userInfo._id}`)
			},

			lookHeadImage() {
				const imageS = [this.userInfo.headImage || this.defaultAvatar];
				uni.previewImage({
					urls: imageS
				});
			},

			handleNavigation(path) {
				if (path) this.$router(path);
			},

			// 新增：跳转到登录页面
			goToLogin() {
				this.$router('/pages/login/index');
			}
		}
	};
</script>

<style scoped>
	/* 基础样式 */
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		color: #111827;
		display: flex;
		flex-direction: column;
	}

	/* 主内容容器 - 包含个人信息和功能菜单 */
	.main-content-container {
		padding: 20px 16px;
		box-sizing: border-box;
		height: 100vh;
		overflow-y: auto;
	}

	/* 个人信息卡片 */
	.profile-card {
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
		padding: 24px;
		margin-bottom: 24px;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	/* 卡片装饰元素 - 增强视觉效果 */
	.profile-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, #3b82f6, #6366f1);
	}

	.profile-header {
		position: relative;
		display: inline-block;
		margin-bottom: 16px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		object-fit: cover;
		border: 4px solid #f3f4f6;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transition: transform 0.3s ease;
	}

	.avatar:hover {
		transform: scale(1.05);
	}

	.edit-btn {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #3b82f6;
		color: white;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
		transition: all 0.2s ease;
	}

	.edit-btn:hover {
		transform: scale(1.1);
		background-color: #2563eb;
	}

	.fullname {
		font-size: 22px;
		font-weight: 700;
		margin-bottom: 6px;
		color: #111827;
	}

	.user-role {
		font-size: 14px;
		color: #6b7280;
		background-color: #f3f4f6;
		padding: 3px 12px;
		border-radius: 12px;
		display: inline-block;
		margin-bottom: 12px;
	}

	/* 登录按钮区域 */
	.login-section {
		margin-top: 16px;
		padding: 0 20px;
	}

	/* 美化后的立即登录按钮 */
	.login-btn {
		width: 100%;
		height: 48px;
		background: linear-gradient(90deg, #3b82f6, #6366f1);
		color: #fff;
		border: none;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	}

	/* 按钮内部光效动画 */
	.login-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: all 0.6s ease;
	}

	.login-btn:hover::before {
		left: 100%;
	}

	.login-btn:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
		background: linear-gradient(90deg, #2563eb, #4f46e5);
	}

	.login-btn:active {
		transform: translateY(-1px);
		box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
	}

	.login-icon {
		font-size: 20px;
	}


	.menu-section {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.menu-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16px;
		padding: 16px 20px;
		box-sizing: border-box;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;
		/* cursor: pointer; */
	}

	.menu-icon {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16px;
		flex-shrink: 0;
	}

	.menu-text {
		flex: 1;
		font-size: 16px;
		font-weight: 500;
		color: #111827;
	}

	.menu-arrow {
		color: #d1d5db;
		font-size: 20px;
		transition: transform 0.2s ease;
	}

	.menu-item:hover .menu-arrow {
		transform: translateX(4px);
	}

	/* 底部按钮区域 */
	.bottom-area {
		padding: 10px 16px;
		box-sizing: border-box;
		width: 100%;
		margin-top: 15px;
	}

	.logout-btn {
		width: 100%;
		height: 40px;
		background-color: #fff;
		color: #ef4444;
		border: 1.5px solid #ef4444;
		border-radius: 16px;
		font-size: 16px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
	}

	.logout-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.08), transparent);
		transition: all 0.5s ease;
	}

	.logout-btn:hover::before {
		left: 100%;
	}

	.logout-btn:hover {
		background-color: #fef2f2;
		transform: translateY(-3px);
		box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15);
		border-color: #dc2626;
	}

	.logout-btn van-icon {
		font-size: 18px;
		transition: transform 0.3s ease;
	}

	.logout-btn:hover van-icon {
		transform: rotate(-15deg);
	}
</style>